import React from 'react';
import {bindActionCreators} from 'redux';
import * as ActionCreator from '../../actions/order-form-actions';
import {connect} from 'react-redux';
import {getRealSize, Touchable} from '../../utils';
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
import ThemeStyles from '../../styles';
import InputItem from '../../components/input-item';
import Button from '../../components/button';
import FileUpload, {UploadState} from '../../components/file-upload';
import config from '../../../config.json';
import {I18n} from '../../reducers/intl';
import {v4 as uuidv4} from 'uuid';

class OtherScreen extends React.PureComponent {
  static navigationOptions = ({navigation}) => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.orderOther'),
    headerRight: () => (
      <Touchable onPress={() => navigation.goBack()}>
        <View
          style={[ThemeStyles.Layout.base.padding, {height: getRealSize(48)}]}>
          <Text style={[ThemeStyles.Front.base]}>
            {I18n.t('button.previous')}
          </Text>
        </View>
      </Touchable>
    ),
  });

  onUploadSuccess = (result) => {
    const {
      form: {files},
      orderFormActions,
    } = this.props;
    // const file = Object.values(files).find(f => f.jobId === jobId);
    // if (file) {
    result.uid = uuidv4();
    files[result.uid] = {...result, state: UploadState.DONE};
    // console.log('result', result)
    // console.log('files', files)
      orderFormActions.updateForm({files: {...files}});
    // }
  };

  render() {
    const {form, orderFormActions, navigation, token} = this.props;
    const url = `${config.httpClient.host}/web/planimage/new`;
    // console.log(JSON.stringify(form.files));
    return (
      <ScrollView style={Styles.container}>
        <View style={Styles.box}>
          <View style={Styles.head}>
            <Text style={Styles.title}>{I18n.t('form.label.others')}</Text>
          </View>
          <FileUpload
            token={token.access}
            uploadUrl={url}
            files={Object.values(form.files || [])}
            // onChange={this.onChangeFile}
            // onProgress={this.onProgress}
            onSuccess={this.onUploadSuccess}
          />
        </View>
        <View style={Styles.box}>
          <View style={Styles.head}>
            <Text style={Styles.title}>{I18n.t('form.label.note')}</Text>
          </View>
          <InputItem
            multiline
            lines={6}
            style={{minHeight: getRealSize(72)}}
            value={form.note}
            onChange={value => orderFormActions.updateForm({note: value})}
          />
        </View>
        <View style={Styles.next}>
          <Button
            label={I18n.t('button.preview')}
            onPress={() =>
              navigation.navigate('Preview', {
                submit: () => orderFormActions.submit(),
              })
            }
          />
        </View>
      </ScrollView>
    );
  }
}

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  form: state.orderForm,
  token: state.token,
});

const mapDispatchToProps = dispatch => ({
  orderFormActions: bindActionCreators(ActionCreator, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(OtherScreen);

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: getRealSize(15),
    backgroundColor: 'white',
  },
  box: {},
  head: {
    paddingVertical: getRealSize(15),
  },
  title: {
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    color: '#333333',
  },
  next: {
    marginVertical: getRealSize(12),
  },
});
